<template>
	<view>
		<!-- 顶部导航 -->
		<!-- <fa-navbar title="个人中心" :border-bottom="false"></fa-navbar> -->
		<!-- 会员中心 -->
		<view class="bg_my"></view>
		<u-navbar :is-back="false" title="看看我的" title-color="#618e3e" :background="background" :border-bottom="false"
			:is-fixed="false"> </u-navbar>
		<!-- <view class="my_vip">
			<view class="vip_left">
				<view class="vip_title">
					我的会员VIP
				</view>
				<view class="vip_tips">
					立即解锁享受更多权益
				</view>
			</view>
			<view class="vip_right">
				立即开通
			</view>
		</view> -->
		<!-- heard.png -->
		<view class="" style="padding: 80rpx 24rpx 0rpx 24rpx;margin-bottom: -40rpx;">
			<image src="/static/image/my_bg.png" mode="widthFix" style="width: 100%;"></image>
			<view class="userTop">
				<!-- :src="vuex_user.avatar" v-if="vuex_user.avatar" -->
				<image :src="vuex_user.avatar" v-if="vuex_user.avatar" mode="aspectFill"  @click="goPage('/pages/my/profile', true)"
					class="my_logo">
				</image>
				<image  v-else src="/static/image/heard.png" mode="aspectFill" @click="goPage('/pages/my/profile', true)"
					class="my_logo">
				</image>


				<view class="" v-if=" vuex_user.nickname ">
					{{ vuex_user.nickname }}
				</view>
				<view class="" v-else @click="goPage('/pages/login/mobilelogin')">
					Hi,请登陆
				</view>
				<view style="padding: 20rpx 0;" v-if="vuex_user.score">
					积分：{{ vuex_user.score || ''}}
				</view>
			</view>
		</view>


		<view class="my_info">
			<view class="" style="padding: 40rpx 0 0 0;position: relative;">
				<!-- <image src="/static/image/vip.png" mode="widthFix" style="width: 100%;"></image> -->
				<image :src="sucai['usercentervip']" mode="widthFix" style="width: 100%;"></image>
				<view class="vip_tips_new">
					<!-- 我们陪伴你的第365天'' -->
					{{vipconfig['peibanday']}}
				</view>
				<view class="vip_name_new">
					{{ vipconfig['leveltext'] }}
				</view>
				<view class="vip_up_info">
					<!-- 	消费满3999升级<br>
					消费满6888升级 -->
					{{vipconfig['uplevelmark1']}}
					<br>
					{{vipconfig['uplevelmark2']}}
				</view>
				<view class="vip_btn_new">
					<!-- 5大权益 > -->
					{{vipconfig['quanyi']}}
				</view>
			</view>
			<view class="order_title">
				<view class="order_left">
					我的订单
				</view>
				<view class="order_right" @click="goPage('/pages/order/list', true)">
					查看全部 >
				</view>
			</view>
			<view class="order_group">
				<view class="order_item" @click="goPage('/pages/order/list?status=1', true)">
					<image src="@/static/image/my_icon1.png" mode="aspectFill" class="order_icon"></image>
					<view class="order_name">待付款</view>
				</view>
				<view class="order_item" @click="goPage('/pages/order/list?status=1', true)">
					<image src="@/static/image/my_icon2.png" mode="aspectFill" class="order_icon"></image>
					<view class="order_name">待发货</view>
				</view>
				<view class="order_item" @click="goPage('/pages/order/list?status=1', true)">
					<image src="@/static/image/my_icon3.png" mode="aspectFill" class="order_icon"></image>
					<view class="order_name">待收货</view>
				</view>
				<view class="order_item" @click="goPage('/pages/order/list?status=4', true)">
					<image src="@/static/image/my_icon4.png" mode="aspectFill" class="order_icon"></image>
					<view class="order_name">待评价</view>
				</view>
				<view class="order_item" @click="goPage('/pages/order/list?status=1', true)">
					<image src="@/static/image/my_icon5.png" mode="aspectFill" class="order_icon"></image>
					<view class="order_name">退换货</view>
				</view>
			</view>

			<view class="menu_list">
				<!-- <view class="menu_item">
					积分商城 >
				</view> -->
				<view class="menu_item"
					@click="goPage('/sub_pages/myPublish/myPublish?userId='+vuex_user.user_id, true)">
					社区中心 >
				</view>
				<view class="menu_item">
					<button class="share-btn u-flex u-row-between" open-type="contact">
						<view>
							在线客服 >
						</view>
					</button>
				</view>

				<view class="menu_item" @click="goPage('/pages/address/address', true)">
					地址管理 >
				</view>
				<view class="menu_item" @click="goPage('/pages/coupon/user',true)">
					卡券包 >
				</view>
			</view>


			<!-- 	<view style="padding-top: 80rpx;">
				<u-swiper :list="list"></u-swiper>
				
				
			</view> -->

			<view style="padding-top: 80rpx;">
				<u-swiper height="500px" :list="vuex_config.swiper_grzx"></u-swiper>
			</view>
		</view>







		<!-- 	<view class="u-p-t-30 u-p-b-50 home" style="background-color: #9a6db6;">
			<view class="userinfo">
				<block v-if="vuex_token">
					<u-avatar size="120" :src="url || vuex_user.avatar"
						@click="goPage('/pages/my/profile', true)"></u-avatar>
					<view class="u-skeleton-fillet u-m-t-10 u-p-l-80 u-p-r-80 u-line-1"
						@click="goPage('/pages/my/profile', true)">{{ vuex_user.nickname || '' }}</view>
					<view class="u-skeleton-fillet u-m-t-10 u-p-l-80 u-p-r-80 u-line-2"
						@click="goPage('/pages/my/profile', true)">ID:{{ vuex_user.id }}</view>
				</block>
				<block v-else>
					<u-avatar size="120" src="0"></u-avatar>
					<view class="u-m-t-30"><u-button hover-class="none" size="mini"
							@click="goPage('/pages/login/mobilelogin')">立即登录</u-button></view>
				</block>
			</view>

		</view> -->
		<!-- 统计 -->
		<!-- 	<view class="u-flex u-text-center u-p-l-30 u-p-r-30 u-p-t-50 u-p-b-50 bg-white">
			<view class="u-flex-4" @click="goPage('/pages/order/list?status=1', true)">
				<view class="u-text-weight u-font-28"><text
						v-text="(vuex_user.order && vuex_user.order.created) || 0"></text></view>
				<view class="u-m-t-20">待付款</view>
			</view>
			<view class="u-flex-4 u-border-left u-border-right" @click="goPage('/pages/order/list?status=2', true)">
				<view class="u-text-weight u-font-28"><text
						v-text="(vuex_user.order && vuex_user.order.paid) || 0"></text></view>
				<view class="u-m-t-20">待体检</view>
			</view>
			<view class="u-flex-4" @click="goPage('/pages/order/list?status=4', true)">
				<view class="u-text-weight u-font-28"><text
						v-text="(vuex_user.order && vuex_user.order.evaluate) || 0"></text></view>
				<view class="u-m-t-20">待评论</view>
			</view>
		</view> -->
		<!-- 导航 -->
		<view class="u-m-t-30 u-m-b-15 cell_group" v-if="false">
			<u-cell-group :border="false">
				<u-cell-item title="地址管理" @click="goPage('/pages/address/address', true)">
					<!-- <image slot="icon" src="@/static/image/my_call1.png" mode="aspectFill" class="call_img"></image> -->
				</u-cell-item>
				<view class="u-border-bottom u-p-30">
					<!-- #ifdef MP-WEIXIN -->
					<button class="share-btn u-flex u-row-between" open-type="contact">
						<view class="fa-cell">
							<!-- <image slot="icon" src="@/static/image/my_call2.png" mode="aspectFill" class="call_img"> -->
							<!-- </image> -->
							<text class="u-m-l-10">在线客服</text>
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#969799"></u-icon>
						</view>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<button class="share-btn u-flex u-row-between" @click="callphone">
						<view class="fa-cell">
							<!-- <image slot="icon" src="@/static/image/my_call2.png" mode="aspectFill" class="call_img"> -->
							<!-- </image> -->
							<text class="u-m-l-10">在线客服</text>
						</view>
						<view class="">
							<u-icon name="arrow-right" color="#969799"></u-icon>
						</view>
					</button>
					<!-- #endif -->
				</view>
				<u-cell-item title="充值" :border-top="false" @click="goPage('/pages/uform/moneycz', true)">
				</u-cell-item>
				<u-cell-item title="地址管理" :border-top="false" @click="goPage('/pages/address/address', true)">
					<!-- <image slot="icon" src="@/static/image/my_call3.png" mode="aspectFill" class="call_img"></image> -->
				</u-cell-item>
				<u-cell-item title="优惠券" @click="goPage('/pages/coupon/user',true)">
					<!-- <image slot="icon" src="@/static/image/my_call4.png" mode="aspectFill" class="call_img"></image> -->
				</u-cell-item>
				<u-cell-item title="发布动态" @click="goPage('/sub_pages/addIndex/addIndex',true)">
					<!-- <u-icon slot="icon" name="camera-fill" color="#c3c3c3" size="40" -->
					<!-- style="margin-right: 10rpx;"></u-icon> -->
					<!-- <image slot="icon" src="@/static/image/my_call4.png" mode="aspectFill" class="call_img"></image> -->
				</u-cell-item>
				<u-cell-item title="捐赠助力" :border-bottom="false" @click="goPage('/sub_pages/donation/donation',true)">
					<!-- <u-icon slot="icon" name="heart-fill" color="#c3c3c3" size="40" -->
					<!-- style="margin-right: 10rpx;"></u-icon> -->

					<!-- <image slot="icon" src="@/static/image/my_call4.png" mode="aspectFill" class="call_img"></image> -->
				</u-cell-item>

				<u-cell-item title="我的收藏" @click="goPage('/pages/my/collect', true)"></u-cell-item>
				<!-- 				<u-grid-item @click="goPage('/pages/uform/uformadd',true)">
									<u-icon name="coupon-fill" :size="60" color="#ff9900"></u-icon>
									<view class="grid-text">客户表单</view>
								 </u-grid-item> -->
				<!-- icon="account-fill" -->
				<!-- 	<u-cell-item  title="个人资料" @click="goPage('/pages/my/profile', true)"></u-cell-item> -->

				<!-- <u-cell-item title="分销商入口" @click="goPage('/pages/my/fxsindex', true)"></u-cell-item> -->


				<!-- 	<u-cell-item title="二级分销商认证" @click="goPage('/pages/uform/userrz', true)"></u-cell-item> -->
				<!-- <u-cell-item icon="list" title="申请提现" @click="goPage('/pages/uform/withdrawapply', true)"></u-cell-item> -->

				<!-- <u-cell-item icon="list" title="我的订单" @click="goPage('/pages/order/list', true)"></u-cell-item> -->
				<!-- <u-cell-item icon="list" title="我的下级" @click="goPage('/pages/order/downusers', true)"></u-cell-item> -->

				<!-- <u-cell-item icon="list" title="下级订单" @click="goPage('/pages/order/oddownlist', true)"></u-cell-item> -->

				<!-- <u-cell-item icon="pushpin-fill" title="每日一签" @click="toSignin"></u-cell-item> -->
				<!-- <u-cell-item icon="heart-fill" title="我的收藏" @click="goPage('/pages/my/collect', true)"></u-cell-item> -->
				<!-- 				<u-cell-item title="我的地址" :border-top="false" @click="goPage('/pages/address/address', true)">
					<image slot="icon" src="@/static/image/my_call1.png" mode="aspectFill" class="call_img"></image>
				</u-cell-item>
				<u-cell-item title="我的优惠券" @click="goPage('/pages/coupon/user',true)"></u-cell-item> -->
				<!-- <u-cell-item icon="coupon-fill" title="核销卡券" @click="goPage('/pages/uform/verifiorder',true)"></u-cell-item> -->

				<!-- <u-cell-item icon="integral-fill" title="我的积分兑换" @click="goPage('/pages/score/order',true)"></u-cell-item> -->

				<!-- <u-cell-item icon="question-circle" title="帮助中心" @click="goPage('/pages/help/index')"></u-cell-item> -->
				<!-- <u-cell-item icon="info-circle-fill" title="关于我们" @click="goPage('/pages/page/page?diyname=aboutus')"></u-cell-item> -->
				<!-- <u-cell-item icon="backspace" v-if="vuex_token" title="退出登录" @click="goPage('out')"></u-cell-item> -->
			</u-cell-group>
		</view>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			wavetop() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-top.png';
			},
			wavemiddle() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-mid.png';
			},
			wavebottom() {
				return this.$u.http.config.baseUrl + '/assets/addons/shop/img/wave-bot.png';
			},
			isBind() {
				return false;
			}
		},
		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				this.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
			this.getVideo();
		},
		data() {
			return {
				list: [],
				background: {
					backgroundColor: "transparent",
				},
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				url: '',
				form: {
					avatar: ''
				},
				sucai: [],
				vipconfig: ''
			};
		},
		methods: {

			getVideo() {
				this.$api.indexShow({}).then(res => {
					console.log(res)
					if (res.code == 1) {
						// this.banar = res.data.banar;
						// this.cate = res.data.catelist;
						this.sucai = res.data.sucai;
						this.vipconfig = res.data.vipconfig;


					}
				})
			},


			getUserIndex: async function() {
				let res = await this.$api.getUserIndex();
				uni.stopPullDownRefresh();
				if (res.code == 1) {
					this.$u.vuex('vuex_user', res.data.userInfo || {});
					if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
						// 弹窗每次登录状态只提示一次
						this.$u.vuex('vuex_setting.prompted', true);
						// uni.showModal({
						// 	title: '温馨提示',
						// 	confirmText: '去设置',
						// 	cancelText: '取消',
						// 	showCancel: true,
						// 	content: '当前未设置昵称，请设置昵称后再继续操作',
						// 	success: (res) => {

						// 		if (res.confirm) {
						// 			this.$u.route("/pages/my/profile");
						// 		} else if (res.cancel) {

						// 		}
						// 	}
						// });
					}
				} else {
					this.$u.toast(res.msg);
					return;
				}
			},
			toSignin() {
				// if (!this.vuex_user.is_install_signin) {
				// 	this.$refs.uTips.show({
				// 		title: '请先安装会员签到插件插件或启用该插件',
				// 		type: 'error',
				// 		duration: '3000'
				// 	});

				// 	return;
				// }
				// this.goPage('/pages/signin/signin', true);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
			},
			// #ifndef MP-WEIXIN
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.vuex_config.phone //仅为示例
				});
			}
			// #endif
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.stopPullDownRefresh();
				this.$u.toast('请先登录');
				this.$u.vuex('vuex_user', {});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f6f8;
	}

	.fa-cell {
		color: #606266;
		display: flex;
		align-items: center;
	}

	.home {
		position: relative;

		.userinfo {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30rpx 0;
			z-index: 100;
			height: 310rpx;

			.u-skeleton-fillet {
				color: #ffffff;
				z-index: 101;
			}
		}

		.corrugated {
			bottom: -2rpx;
			left: 0;
			position: absolute;
			width: 100%;
			height: 50%;
			overflow: hidden;
			z-index: 0;

			.wave-item {
				position: absolute;
				width: 200%;
				left: 0;
				height: 200rpx;
				background-repeat: repeat no-repeat;
				background-position: 0 bottom;
				transform-origin: center bottom;
			}

			.wave-top {
				opacity: 0.5;
				animation: wave-animation 3s;
				animation-delay: 1s;
				background-size: 50% 60rpx;
				z-index: 15;
			}

			.wave-middle {
				opacity: 0.75;
				animation: wavemove 10s linear infinite;
				background-size: 50% 80rpx;
				z-index: 10;
			}

			.wave-bottom {
				animation: wavemove 15s linear infinite;
				background-size: 50% 45rpx;
				z-index: 5;
			}
		}
	}

	@keyframes wavemove {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(0.55);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}

	.menu_list {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.menu_item {
			width: 25%;
			color: rgba(51, 51, 51, 0.6);
			padding: 20rpx 0;
			font-size: 22rpx;
			display: flex;
			justify-content: center;

		}
	}

	.userTop {
		padding: 24rpx;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 110rpx;
		z-index: 9;

		.userRight {
			margin-left: 20rpx;

			.userName {
				font-weight: 600;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.userTips {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.6);
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.my_logo {
			width: 124rpx;
			height: 124rpx;
			border-radius: 50%;
			flex-shrink: 0;
		}
	}

	.info_group {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.info_item {
			width: 25%;
			text-align: center;

			.info_num {
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}

			.info_name {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(51, 51, 51, 0.6);
				line-height: 44rpx;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.my_vip {
		padding: 24rpx 24rpx 40rpx 24rpx;
		margin: 0 24rpx 24rpx 24rpx;
		background: linear-gradient(90deg, #E1CFB1 0%, #ECDECA 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		top: 60rpx;
		z-index: -1;

		.vip_left {
			.vip_title {
				font-weight: 600;
				font-size: 32rpx;
				color: #8B5B0D;
				line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}

			.vip_tips {
				font-weight: 500;
				font-size: 20rpx;
				color: rgba(139, 91, 13, 0.6);
				line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}
		}

		.vip_right {
			background-color: #fff;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 20rpx;
			color: #000000;
			line-height: 44rpx;
			font-style: normal;
			text-transform: none;
			padding: 4rpx 30rpx;
		}
	}

	.my_info {
		margin: 0 24rpx 24rpx 24rpx;
		padding: 80rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		position: relative;

		.order_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 50rpx 0;

			.order_left {
				font-weight: bold;
				font-size: 26rpx;
			}

			.order_right {
				font-size: 26rpx;
				color: #6c6c6c;
			}
		}
	}

	.order_group {

		display: flex;
		align-items: center;
		justify-content: space-between;
		// position: relative;
		// top: -60rpx;

		.order_item {
			width: 20%;
			text-align: center;

			.order_icon {
				width: 64rpx;
				height: 64rpx;
				flex-shrink: 0;

			}

			.order_name {
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 0.8);
				// line-height: 44rpx;

				font-style: normal;
				text-transform: none;
			}
		}
	}

	.cell_group {
		margin: 24rpx;
		border-radius: 24rpx;
		padding: 20rpx 0;
		background-color: #fff;
	}

	.call_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.vip_tips_new {
		background-color: #98c34c;
		color: #fff;
		position: absolute;
		padding: 4rpx 10rpx;
		border-radius: 30rpx;
		top: 40rpx;
	}

	.vip_name_new {
		color: #f6fded;
		font-size: 55rpx;
		font-weight: bold;
		position: absolute;
		top: 90rpx;
		left: 20px;
	}

	.vip_up_info {
		color: #f6fded;
		font-size: 24rpx;
		position: absolute;
		line-height: 1.2;
		bottom: 20rpx;
		left: 20px;
	}

	.vip_btn_new {
		background-color: #f6fded;
		padding: 8rpx 20rpx;
		font-size: 24rpx;
		position: absolute;
		line-height: 1.2;
		bottom: 30rpx;
		right: 20px;
		border-radius: 50rpx;
	}
</style>